<template>
  <view class="invitation">
    <div class="top-container pd_t_60 pd_b_30">
      <view class="bg_img">
        <img src="../../static/img/user_bg.png" alt="">
      </view>
      <div class="row pd_l_30 pd_r_30" style="z-index: 1">
        <div class="font-24 col-fff flex-1" style="z-index: 1">钱包余额 (元)</div>
        <navigator :url="`/pages/user/withdrawal?currentMoney=${currentMoney}&type=2`"
                   style="z-index: 1" class="font-26 col-FF8B37 bg-fff text-cent withdrawal-btn">提现</navigator>
      </div>
      <div class="row cont-center pd_l_30 pd_r_30 pd_b_70"  style="z-index: 1">
        <div style="z-index: 1" class="font-76 col-fff flex-1">{{currentMoney ? currentMoney : '0'}}</div>
        <navigator url="/pages/user/invitation_code" style="z-index: 1"
                   class="font-26 col-FF8B37 bg-fff text-cent withdrawal-btn">我的邀请码</navigator>
      </div>
      <div v-if="monthDataShow" class="row cont-center text-cent pd_t_30"  style="z-index: 1">
        <div style="border-right: 1px solid #FFFFFF;width: 50%;z-index: 1">
          <div class="font-36 col-fff pd_b_10" style="z-index: 1">{{todayMoney ? todayMoney : '0'}}</div>
          <div class="font-22 col-fff" style="z-index: 1">今日收入(元）</div>
        </div>
        <div style="width: 50%; z-index: 1">
          <div class="font-36 col-fff pd_b_10"  style="z-index: 1">{{totalMoney ? totalMoney : '0'}}</div>
          <div class="font-22 col-fff" style="z-index: 1">累计收入(元）</div>
        </div>
      </div>
      <div v-if="!monthDataShow" class="row cont-center text-cent pd_t_30"  style="z-index: 1">
        <div style="border-right: 1px solid #FFFFFF;width: 50%; z-index: 1">
          <div class="font-36 col-fff pd_b_10" style="z-index: 1">{{tcurrentRegister ? tcurrentRegister : '0'}}</div>
          <div class="font-22 col-fff" style="z-index: 1">{{textCont}}</div>
        </div>
        <div style="width: 50%;z-index: 1">
          <div class="font-36 col-fff pd_b_10" style="z-index: 1">{{totalRegister ? totalRegister : '0'}}</div>
          <div class="font-22 col-fff" style="z-index: 1">{{textContTo}}</div>
        </div>
      </div>
    </div>
    <div class="container middle-container bg-fff">
      <div class="row cont-center jaround font-28 yh_bd_bottom pd_t_30 col-333">
        <div class="pd_b_30 text-cent title" :class="{to_active:show == 1}" @click="toshow('1')">邀请用户</div>
        <div class="pd_b_30 text-cent title" :class="{to_active:show == 2}" @click="toshow('2')">返佣明细</div>
        <div class="pd_b_30 text-cent title" :class="{to_active:show == 3}" @click="toshow('3')">提现记录</div>
      </div>
      <div class="row cont-center jaround font-26 col-333 pd_t_19 pd_b_20 pd_l_30 pd_r_30">
        <div @click="upDay">上个月</div>
        <div @click="openSelector(nian,onPositionSelected)">{{yearData}}年{{monthData}}月</div>
        <div @click="nextDay">下个月</div>
      </div>
    </div>
    <view class="flex-1">
      <scroll-view scroll-y :style="{height: scroll_height + 'px'}">
        <div v-if="show == 1" class="">
            <div style="border-bottom: 1px solid #F7F7F7;"></div>
            <div v-for="(item,index) in list" :key="index" class="pd_t_30 pd_b_30 yh_bd_bottom pd_l_30 pd_r_30">
              <div class="row cont-center">
                <div class="font-26 col-333 pd_r_10">{{item.phonenumber}}</div>
                <div v-if="item.buyFlag" class="font-20 col-fff bg-FF6251 text-cent state">已购买</div>
                <div class="flex-1"></div>
                <div class="font-22 col-999 pd_t_10">{{item.registerTime}}</div>
              </div>
            </div>
          </div>
        <div v-if="show == 2">
          <div style="border-bottom: 0.1rem solid #F7F7F7;"></div>
          <div v-for="(item,index) in list" :key="index" class="pd_t_30 pd_b_30 yh_bd_bottom pd_l_30 pd_r_30">
            <div class="row cont-center">
              <div class="font-26 col-333 flex-1">{{item.user}}</div>
              <div class="font-26 col-FF8B37">+{{item.money}}</div>
            </div>
            <div class="font-22 col-999 pd_t_10">{{item.time}}</div>
          </div>
        </div>
        <div v-if="show == 3">
          <div style="border-bottom: 0.1rem solid #F7F7F7;"></div>
          <div v-for="(item,index) in list" :key="index" class="pd_t_30 pd_b_30 yh_bd_bottom pd_l_30 pd_r_30">
            <div v-if="item.status == 3" @click="rejected(item)" class="row cont-center">
              <div class="font-26 col-333 pd_r_20" style="width: 330upx;">{{item.text}}</div>
              <div v-if="item.status == 1" class="font-20 col-fff bg-FF8B37 text-cent state">待审批</div>
              <div v-if="item.status == 2" class="font-20 col-fff bg-21B100 text-cent state">已通过</div>
              <div v-if="item.status == 3" class="font-20 col-fff bg-FF8B37 text-cent state">已驳回</div>
              <div v-if="item.status == 4" class="font-20 col-fff bg-FF8B37 text-cent state">已关闭</div>
              <div v-if="item.status == 5" class="font-20 col-fff bg-21B100 text-cent state">已到账</div>
              <div v-if="item.status == 6" class="font-20 col-fff bg-FF8B37 text-cent state">提现失败</div>
              <div class="flex-1"></div>
              <div class="font-26 col-333">-{{item.money}}</div>
            </div>
            <div v-if="item.status != 3" class="row cont-center">
              <div class="font-26 col-333 pd_r_20" style="width: 330upx;">{{item.text}}</div>
              <div v-if="item.status == 1" class="font-20 col-fff bg-FF8B37 text-cent state">待审批</div>
              <div v-if="item.status == 2" class="font-20 col-fff bg-21B100 text-cent state">已通过</div>
              <div v-if="item.status == 3" class="font-20 col-fff bg-FF8B37 text-cent state">已驳回</div>
              <div v-if="item.status == 4" class="font-20 col-fff bg-FF8B37 text-cent state">已关闭</div>
              <div v-if="item.status == 5" class="font-20 col-fff bg-21B100 text-cent state">已到账</div>
              <div v-if="item.status == 6" class="font-20 col-fff bg-FF8B37 text-cent state">提现失败</div>
              <div class="flex-1"></div>
              <div class="font-26 col-333">-{{item.money}}</div>
            </div>
            <div class="font-22 col-999 pd_t_10">{{item.time}}</div>
          </div>
        </div>
        <div class="no-data-img" v-if="list.length < 1">
          <u-empty :text="show==1?'暂无邀请用户~':show==2?'暂无返佣明细~':'提现记录~'" mode="list"></u-empty>
        </div>
      </scroll-view>
    </view>
    <u-select v-model="showAction" mode="mutil-column" :list="actionData" @confirm="actionConfirm"></u-select>
  </view>
</template>

<script>

  import {request} from "../../util/api";
  //import {Q}

  export default {
    data() {
      return {
        show: '1',
				totalMoney: '',
				currentMoney: '',
				todayMoney: '',
				list: [],
				nian: this.nian,
				yearData: '',
				monthData: '',
				monthDataShow: true,
				monthNum: '1',
				currentRegister: '',
				totalRegister: '',
				textCont: '当月注册用户(人）',
				textContTo: '当月注册用户(人）',
        scroll_height: '',
        showAction: false,
        actionData: [
          [{"label":"2020"},{"label":"2021"},{"label":"2022"},{"label":"2023"},{"label":"2024"},{"label":"2025"},{"label":"2026"},{"label":"2027"},{"label":"2028"},{"label":"2029"},{"label":"2030"},{"label":"2031"},{"label":"2032"},{"label":"2033"},{"label":"2034"},{"label":"2035"},{"label":"2036"},{"label":"2037"},{"label":"2038"},{"label":"2039"}],
          [{"label":"1"},{"label":"2"},{"label":"3"},{"label":"4"},{"label":"5"},{"label":"6"},{"label":"7"},{"label":"8"},{"label":"9"},{"label":"10"},{"label":"11"},{"label":"12"}]
        ],
        tcurrentRegister: 0
      }
    },

    onShow() {
      this.yearMonth()
      this.getSalesMoney()
      this.toshow(this.show)
    },

    async onReady() {
      let total = (await this.$u.getRect('.invitation')).height;
      let height1 = (await this.$u.getRect('.top-container')).height;
      let height2 = (await this.$u.getRect('.middle-container')).height;
      this.scroll_height = total - height1 - height2
    },

    methods: {
      rejected (obj) {
        uni.showModal({
          title: '驳回原因',
          content: obj.failReason,
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },

      upDay () {
        if (Number(this.monthData) < 2) {
          this.monthData = 12;
          this.yearData = Number(this.yearData) - 1;
        } else {
          this.monthData = Number(this.monthData) - 1
        }
        this.monthDataShow = false;
        this.toshow(this.show);
      },

      nextDay () {
        if (Number(this.monthData) > 11) {
          this.monthData = 1;
          this.yearData = Number(this.yearData) + 1;
        } else {
          this.monthData = Number(this.monthData) + 1
        }
        this.monthDataShow = false;
        this.toshow(this.show);
      },
      toshow(val) {
        this.show = val;
        if (val == 1) {
          this.textCont = '当月注册用户(人）'
          this.textContTo = '累计注册用户(人）'
          this.getInviteUsers()
        } else if (val == 2) {
          this.textCont = '当月收入(元）'
          this.textContTo = '当月消费用户(人）'
          this.getRefundDetails();
        } else {
          this.textCont = '当月提现(元）'
          this.textContTo = '累计提现(元）'
          this.getWithdrawalRecord();
        }
      },
      yearMonth () {
        var nowDate = new Date();
        var date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
        }
        this.yearData = date.year;
        this.monthData = date.month;
        // this.getInviteUsers();
      },
      getSalesMoney () {
        var that_ = this;
        request({
          url: '/app/userCenter/getSalesMoney'
        }).then(ret => {
          that_.totalMoney = ret.data.totalMoney ? ret.data.totalMoney : 0;
          that_.currentMoney = ret.data.currentMoney ? ret.data.currentMoney : 0;
          that_.todayMoney = ret.data.todayMoney ? ret.data.todayMoney : 0;
        })
      },
      getInviteUsers () {
        var that_ = this;
        that_.list = [];
        that_.tcurrentRegister = 0;
        that_.totalRegister = 0;
        request({
          url: '/app/userCenter/invitationUserRecord?date=' + that_.yearData + '-' + that_.monthData + '-1'
        }).then(ret => {
          that_.monthNum = '1';
          that_.tcurrentRegister = ret.data.currentRegister;
          console.log(that_.tcurrentRegister)
          console.log(that_.monthDataShow)
          that_.totalRegister = ret.data.totalRegister;
          if (ret.data && ret.data.registers.length > 0) {
            that_.list = ret.data.registers;
          }
        })
      },
      getRefundDetails () {
        var that_ = this;
        that_.list = [];
        that_.tcurrentRegister = 0;
        that_.totalRegister = 0;
        request({
          url: '/app/userCenter/returnMoneyRecord?date=' + that_.yearData + '-' + that_.monthData + '-1'
        }).then(ret => {
          that_.monthNum = '2';
          that_.tcurrentRegister = ret.data.currMoneyEarning;
          that_.totalRegister = ret.data.totalUserNum;
          if (ret.data.commissions.length > 0) {
            that_.list = ret.data.commissions;
          }
        })
      },
      getWithdrawalRecord () {
        var that_ = this;
        that_.list = [];
        that_.tcurrentRegister = 0;
        that_.totalRegister = 0;
        request({
          url: '/app/userCenter/cashOutRecord?date=' + that_.yearData + '-' + that_.monthData + '-1'
        }).then(ret => {
          that_.monthNum = '3';
            that_.tcurrentRegister = ret.data.currentMonthCashOut;
            that_.totalRegister = ret.data.totalCashOut;
            if (ret.data.cashes.length > 0) {
              that_.list = ret.data.cashes;
            }
        })
      },

      openSelector() {
        this.showAction = true
      },
      actionConfirm(res) {
        this.yearData  = res[0].label
        this.monthData = res[1].label;
        this.monthDataShow = false;
        this.toshow(this.show);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .invitation {
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    box-sizing: border-box;
    height: calc(100vh - var(--window-top));
    .bg-21B100 {
      background: #21B100;
    }
    .bg-FF8B37 {
      background: #2A6AAA;
    }
    .pd_b_70 {
      padding-bottom: 70upx;
    }
    .top-container {
      position: relative;
      .bg_img {
        width: 100%;
        height: 434upx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .font-76 {
        font-size: 76upx;
      }
      .withdrawal-btn {
          width: 158upx;
          height: 54upx;
          line-height: 54upx;
          border-radius: 27upx;
      }
    }
    .to_active {
				color: #2A6AAA;
				border-bottom: 4upx solid #2A6AAA;
			}

			.title {
				width: 33%;
			}

			.state {
				width: 98upx;
				height: 36upx;
				line-height: 36upx;
				border-radius: 18upx;
			}

			.no-data-img {
				width: 298upx;
				height: 232upx;
				margin: 16upx auto 0;
			}

			.no-data-img img {
				width: 100%;
				height: 100%;
			}
    .jaround {
      justify-content: space-around;
      align-items: center;
    }
  }
</style>
